<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="446px"
    destroy-on-close
    @close="clearForm"
    :hasFooter="false"
  >
    <!-- @onCommit="handleSubmit" -->

    <template #content>
      <div class="content-warp">
        <div class="left-form" v-if="isShow">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="备件编号：" prop="sparePartId">
                  <el-input
                    v-model="form.sparePartId"
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备件名称：" prop="sparePartName">
                  <el-input
                    v-model="form.sparePartName"
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="所属系统：" prop="system">
                  <el-select
                    v-model="form.system"
                    placeholder="--请选择--"
                    clearable
                  >
                    <el-option
                      v-for="item in props.system"
                      :key="item.code"
                      :label="item.value"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备件数量：" prop="number">
                  <el-input
                    maxlength="5"
                    onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"
                    v-model.number="form.number"
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row justify="end">
              <span>
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="btnOk">确定</el-button>
              </span>
            </el-row>
          </el-form>
        </div>
        <div class="left-form" v-else>
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-row>
              <el-col>
                <h3
                  style="
                    text-align: center;
                    margin-bottom: 10px;
                    font-size: 16px;
                    font-weight: 700;
                  "
                >
                  是否确认提交该入库信息，确认提交后无法修改和删除！
                </h3>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备件编号：" style="margin-bottom: 0px">
                  <text>{{ form.sparePartId }}</text>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备件名称：" style="margin-bottom: 0px">
                  <text>{{ form.sparePartName }}</text>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="所属系统：" style="margin-bottom: 0px">
                  <text>
                    {{
                      form.system === '01'
                        ? '消防系统'
                        : form.system === '02'
                        ? '通风系统'
                        : form.system === '03'
                        ? '通信系统'
                        : form.system === '04'
                        ? '供电系统'
                        : form.system === '05'
                        ? '照明系统'
                        : form.system === '06'
                        ? '排水系统'
                        : form.system === '07'
                        ? '其他系统'
                        : ''
                    }}
                  </text>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备件数量：" style="margin-bottom: 0px">
                  <text>{{ form.number }}</text>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row justify="end">
              <span>
                <el-button @click="back" v-if="btnShow">返回</el-button>
                <el-button
                  type="primary"
                  @click="handleSubmit"
                  v-loading="loading"
                  >确定</el-button
                >
              </span>
            </el-row>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { AddInventoryRecords } from '@/api/equipment'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  system: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['onReload'])
const formRef = ref(null)
const isShow = ref(true)
const loading = ref(false)
const btnShow = ref(true)
const form = reactive({
  sparePartId: '',
  sparePartName: '',
  system: '',
  number: ''
  // reasonforclaim: '',
  // claimName: ''
})
const rules = reactive({
  sparePartId: [
    {
      required: true,
      message: '备件编号不能为空',
      trigger: 'blur'
    }
  ],
  sparePartName: [
    {
      required: true,
      message: '备件名称不能为空',
      trigger: 'blur'
    }
  ],
  system: [
    {
      required: true,
      message: '所属系统不能为空',
      trigger: 'change'
    }
  ],
  number: [
    {
      required: true,
      message: '备件数量不能为空',
      trigger: 'blur'
    }
  ]
})

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
    } else {
      return false
    }
  })
}

const save = async (data) => {
  loading.value = true
  btnShow.value = false

  const res = await AddInventoryRecords(data)
  if (res && res.id) {
    message({ type: 'success', message: '新增库存记录成功!' })
    clearForm()
    loading.value = false
    btnShow.value = true
    emits('onReload')
  }
}
const cancel = () => {
  emits('update:visible', false)
}

const back = () => {
  isShow.value = true
}
const btnOk = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      isShow.value = false
    } else {
      return false
    }
  })
}
const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.sparePartId = ''
  form.sparePartName = ''
  form.system = ''
  form.number = ''
  isShow.value = true
}
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  width: 212px;
}
</style>
